@page "/TextField"

@using FluentUI.Demo.Shared.Pages.TextField.Examples

<h1>Text field</h1>

<p>An implementation of a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/text" target="_blank" rel="noopener noreferrer">text field</a>. The <code>&lt;FluentTextField&gt;</code> supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.</p>
<p>
    <code>&lt;FluentTextField&gt;</code> wraps the <code>&lt;fluent-text-field&gt;</code> element, a web component implementation of a text field leveraging the
    Fluent UI design system. 
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(TextFieldDefault)"></DemoSection>

<DemoSection Title="Displays" Component="@typeof(TextFieldDisplays)"></DemoSection>

<DemoSection Title="States" Component="@typeof(TextFieldStates)"></DemoSection>

<DemoSection Title="Icons" Component="@typeof(TextFieldIcons)"></DemoSection>

<DemoSection Title="Types" Component="@typeof(TextFieldTypes)"></DemoSection>

<DemoSection Title="Focus" Component="@typeof(TextFieldFocus)"></DemoSection>

<DemoSection Title="Filled Appearance" Component="@typeof(TextFieldFilled)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentTextField)" GenericLabel="string?" />
